import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
const pathResolve = dir => resolve(__dirname, dir);

import Unocss from "unocss/vite";
import {
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";


// https://vitejs.dev/config/
export default defineConfig({
  base:'./',
  plugins: [vue(),
  Unocss({
    shortcuts: [
      {
        "flex-ac": "flex items-center",
      },
      {
        "cc-custom-btn":
          "flex items-center justify-center bg-gradient-to-b from-#3d7fff1a to-#3d7fff h-40px  border-solid border-1px border-rd-4px border-color-#09e2f8 px-50px flex justify-center items-center cursor-pointer mb-10px ml-20px",
      },
      {
        "cc-btn":
          "flex items-center justify-center bg-gradient-to-b from-#3d7fff1a to-#3d7fff border-solid border-1px border-rd-4px border-color-#09e2f8 flex justify-center items-center cursor-pointer",
      },
      {
        "cc-btn-hover": "bg-gradient-to-t from-#3d7fff1a to-#3d7fff",
      },
      {
        "cc-custom-btn-hover":
          "bg-gradient-to-t from-#3d7fff1a to-#3d7fff h-40px",
      },
      {
        "cc-custom-btn-disabled":
          "bg-gradient-to-t from-#3d7fff1a from-#3d7fff1a h-40px color-#999",
      },
    ],
    presets: [
      presetUno(),
      presetAttributify(),
      presetIcons({
        scale: 1.2,
        warn: true,
      }),
    ],
    transformers: [transformerDirectives(), transformerVariantGroup()],
    rules: [
      [
        "apple-blur",
        {
          background: "rgba(255, 255, 255, 0.1)",
          "-webkit-backdrop-filter": "saturate(150%) blur(6px)",
          "backdrop-filter": "saturate(150%) blur(6px)",
        },
      ],
      [
        "border-test",
        {
          border: "1px solid #fff",
          "box-sizing": "border-box",
        },
      ],
    ],
  }),

  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/assets/style/common.scss" as *;`,
      },
    },
  },
  resolve: {
    alias: {
      "@": pathResolve("./src"), // 设置 `@` 指向 `src` 目录
      // views: pathResolve("./src/views"), // 设置 `views` 指向 `./src/views` 目录，下同
      // components: pathResolve("./src/components"),
      // assets: pathResolve("./src/assets"),
    },
  },
})
